<template>
	<view class="content">
		<!-- <globalModal></globalModal> -->
		<view class="flex title">
			<view @click="textClick" class="w30">
				<uni-icons type="location" size="18">广州市</uni-icons>
				<view class="color-999 f16">
					点击选择市区城区
				</view>
			</view>
			<view class="w70">
				<uni-search-bar v-model="searchValue" @input="onKeyInput" placeholder="请输入关键词">
				</uni-search-bar>
			</view>
		</view>
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item>
					<view class="swiper-item uni-bg-red">A</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item uni-bg-green">B</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item uni-bg-blue">C</view>
				</swiper-item>
			</swiper>
		</view>
		<view style="margin: 20rpx 0;">
			查看本地区信息点击右上角选择所市区选择，这里是本地商信同城，可免费发布、求职和招聘，二手买卖，方便更多本地人！
		</view>
		<button @click="gotoShangxinRelease" type="warn" style="margin-bottom: 20rpx;">点击商信发布</button>
		<view style="display: flex;align-items: center;flex-wrap: wrap;">
			<view @click="gotoList(index)" v-for="(item,index) in 10" :key="index"
				style="display: flex;align-items: center;justify-content: center;flex-direction: column;flex:auto;margin-bottom: 10rpx;">
				<image src="../../static/logo.png" mode="" style="width: 100rpx;height: 100rpx;"></image>
				<view>招聘要求</view>
			</view>
		</view>
		<tabChangeVue></tabChangeVue>
		<view class="content-root">
			<view class="content-wrap">
				<view v-if="productList && productList.length > 0">
					<view class="list-item" v-for="(item, index) in productList" :key="index">
						<text class="itme-name">{{ item.name }}</text>
						<text class="itme-desc">{{ item.desc }}</text>
					</view>
				</view>
				<view class="no-data" v-else>暂无数据</view>
				<view class="no-more-data" v-if="noMoreData">
					<text>没有更多数据了</text>
				</view>
			</view>
			<view class="go-top" v-if="showGoToTop" @click="goToTop">
				<text>回到</text>
				<text>顶部</text>
			</view>
		</view>
	</view>
</template>

<script>
	import tabChangeVue from '../../components/tabChange.vue'
	import listVue from '../list/list.vue'
	import { useStore,mapState } from 'vuex';
	export default {
		components: {
			tabChangeVue,
			listVue
		},
		data() {
			return {
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				inputValue: '',
				searchValue: '',
				productType: 1,
				currentPage: 1,
				lastPage: 1,
				lastPostion: 0,
				pageSize: 30,
				total: 0,
				noMoreData: false,
				productList: [],
				showGoToTop: false
			}
		},
		onLoad(option) {
			this.productType = option.productType
			this.getProductList(true)
		},
		onPageScroll(e) {
			this.lastPostion = e.scrollTop
			console.log(`当前滚动位置 this.lastPostion = ${this.lastPostion} , this.showGoToTop = ${this.showGoToTop}`)
			if (this.lastPostion > 300) {
				this.showGoToTop = true
			} else if (this.showGoToTop) {
				this.showGoToTop = false
			}
		},
		onPullDownRefresh() {
			this.lastPage = this.currentPage
			this.currentPage = 1
			this.getProductList(true)
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 600);
		},

		onReachBottom() {
			if (this.noMoreData) {
				return
			}
			this.lastPage = this.currentPage
			this.currentPage++
			this.getProductList(false)
		},
		computed: {
		    // ...mapState(["globalModal"]),
		  },
		methods: {
			gotoList: function(index) {
				console.log(index);
				uni.navigateTo({
					url: '/pages/list/list'
				})
			},
			onKeyClick: function() {
				uni.navigateTo({
					url: '/pages/comment/comment',
					// events: {
					// 	// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
					// 	acceptDataFromOpenedPage: function() {
					// 		console.log(1)
					// 	},
					// 	someEvent: function() {
					// 		console.log(2)
					// 	}
					// },
					// success: function(res) {
					// 	// 通过eventChannel向被打开页面传送数据
					// 	res.eventChannel.emit('acceptDataFromOpenerPage', {
					// 		data: 'data from starter page'
					// 	})
					// }
				})
			},
			onKeyInput: function(value) {
				this.inputValue = value
				console.log(this.inputValue);
			},
			textClick: function() {
				console.log(888888888);
				this.$store.commit('setModal', {visible: true});
				console.log(this.$store.state.globalModal.visible,99999);
				return
				console.log(123);
				// uni.chooseImage({
				// 	count: 6, //默认9
				// 	sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				// 	// sourceType: ['album'], //从相册选择
				// 	success: function(res) {
				// 		console.log(JSON.stringify(res.tempFilePaths));
				// 	}
				// });
				uni.chooseLocation({
					success: (res) => {
						if (res.errMsg === 'chooseLocation:ok') {
							console.log('位置名称：' + res.name);
							console.log('详细地址：' + res.address);
							console.log('纬度：' + res.latitude);
							console.log('经度：' + res.longitude);
						}
					}
				})
			},
			gotoShangxinRelease: function() {
				console.log(9999);
				uni.navigateTo({
					// url: '/pages/ShangxinRelease/ShangxinRelease'
					url:'/pages/blogPopup/blogPopup'
				})
			},
			//回到顶部
			goToTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0,
				})
			},

			//获取商品列表
			async getProductList(refresh) {
				//let result =  await getProductList() // 网络请求

				setTimeout(() => { // 模拟网络请求
					if (refresh) {
						this.iniLocalData()
						return
					}

					this.loadMoreData()

				}, 500);
			},

			iniLocalData() {
				this.noMoreData = false
				this.productList = [{
						productId: "1234567890",
						name: "西蓝花",
						desc: "有机蔬菜，安全健康",
						skuType: [{
							id: "1",
							price: "9.99",
							txt: ""
						}]
					},
					{
						productId: "3234567890",
						name: "西红柿",
						desc: "有机蔬菜，安全健康;",
						skuType: [{
							id: "1",
							price: "9.00",
							txt: ""
						}]
					},
					{
						productId: "4234567890",
						name: "洋葱",
						desc: "洋葱可生吃，安全健康;",
						skuType: [{
							id: "1",
							price: "5.00",
							txt: ""
						}]
					},
					{
						productId: "1734567890",
						name: "小青菜",
						desc: "有机蔬菜，安全健康;",
						skuType: [{
							id: "1",
							price: "3.00",
							txt: ""
						}]
					},
					{
						productId: "1234467890",
						name: "上海青",
						desc: "蔬菜，安全健康;",
						skuType: [{
							id: "1",
							price: "3.00",
							txt: ""
						}]
					},
					{
						productId: "1234567390",
						name: "上海青",
						desc: "蔬菜，安全健康;",
						skuType: [{
							id: "1",
							price: "3.00",
							txt: ""
						}]
					},
					{
						productId: "1239567390",
						name: "娃娃菜",
						desc: "蔬菜，安全健康;",
						skuType: [{
							id: "1",
							price: "8.00",
							txt: ""
						}]
					},
					{
						productId: "1239567390",
						name: "胡萝卜",
						desc: "有机蔬菜，安全健康;",
						skuType: [{
							id: "1",
							price: "5.00",
							txt: ""
						}]
					},
					{
						productId: "1239567390",
						name: "西葫芦",
						desc: "蔬菜，安全健康;",
						skuType: [{
							id: "1",
							price: "8.00",
							txt: ""
						}]
					},
					{
						productId: "1239567390",
						name: "紫甘蓝",
						desc: "蔬菜，安全健康;",
						skuType: [{
							id: "1",
							price: "5.00",
							txt: ""
						}]
					},
					{
						productId: "1239567390",
						name: "大白菜",
						desc: "蔬菜，安全健康;",
						skuType: [{
							id: "1",
							price: "3.00",
							txt: ""
						}]
					}
				]
			},

			loadMoreData() {
				if (this.noMoreData) {
					return
				}
				let result = [{
						productId: "2239567390",
						name: "牛腱",
						desc: "新鲜牛肉;",
						skuType: [{
							id: "1",
							price: "109.00",
							txt: ""
						}]
					},
					{
						productId: "2239567391",
						name: "牛腿肉",
						desc: "新鲜牛肉;",
						skuType: [{
							id: "1",
							price: "99.00",
							txt: ""
						}]
					},
					{
						productId: "2239567392",
						name: "牛腩",
						desc: "新鲜牛肉;",
						skuType: [{
							id: "1",
							price: "89.00",
							txt: ""
						}]
					},
					{
						productId: "2339567390",
						name: "排骨",
						desc: "新鲜猪肉;",
						skuType: [{
							id: "1",
							price: "29.00",
							txt: ""
						}]
					},
					{
						productId: "2339567391",
						name: "后退肉",
						desc: "新鲜猪肉;",
						skuType: [{
							id: "1",
							price: "18.00",
							txt: ""
						}]
					},
					{
						productId: "2339567390",
						name: "五花肉",
						desc: "新鲜猪肉;",
						skuType: [{
							id: "1",
							price: "24.00",
							txt: ""
						}]
					}
				]

				this.productList = [...this.productList, ...result]
				this.noMoreData = true // 这个逻辑在实际项目开发中以接口返回的总数量为准
			}
		}
	}
</script>


<style>
	.content {
		padding: 0 10rpx;
	}

	.title {
		margin: 10rpx 0;
		padding: 10rpx;
	}

	.w30 {
		width: 30%;
	}

	.w70 {
		width: 70%;
	}

	.uni-bg-red {
		background-color: red;
	}

	.uni-bg-green {
		background-color: green;
	}

	.uni-bg-blue {
		background-color: blue;
	}

	.color-999 {
		color: #999;
	}

	.flex {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.uni-input {
		border: 1rpx solid #cccccc;
		border-radius: 100rpx;
		height: 60rpx;
		font-size: 26rpx;
		line-height: 60rpx;
		text-align: center;
	}

	.f16 {
		font-size: 20rpx;
	}

	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
	}

	.swiper {
		height: 400rpx;
	}

	.swiper-item {
		display: block;
		height: 400rpx;
		line-height: 400rpx;
		text-align: center;
	}

	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}

	.uni-common-mt {
		margin-top: 60rpx;
		position: relative;
	}

	.info {
		position: absolute;
		right: 20rpx;
	}

	.uni-padding-wrap {
		width: 550rpx;
		padding: 0 100rpx;
	}

	.content-root {
		height: 100%;
		background-color: #f5f5f5;
		/* padding: 32rpx; */
	}

	.content-wrap {
		background-color: #f5f5f5;
		padding-bottom: 80rpx;
	}

	.list-item {
		display: flex;
		padding: 16rpx 20rpx;
		flex-direction: column;
		background-color: #fceeee;
		border-radius: 16rpx;
		color: #000;
		margin-bottom: 32rpx;
	}

	.itme-name {
		font-size: 32rpx;
	}

	.itme-desc {
		font-size: 24rpx;
	}

	.no-data {
		height: 100%;
		text-align: center;
		margin-top: 400rpx;
		color: #000;
		font-size: 28rpx;
	}

	.no-more-data {
		width: 100%;
		height: 50rpx;
		color: #000;
		align-items: center;
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		text-align: center;
	}

	.go-top {
		z-index: 99;
		position: fixed;
		display: flex;
		flex-flow: column;
		right: 0;
		bottom: 0;
		margin-right: 32rpx;
		margin-bottom: 200rpx;
		width: 80rpx;
		height: 80rpx;
		align-items: center;
		background-color: #eeeeee;
		border-radius: 50%;
		font-size: 20rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		text-align: center;
	}
</style>